<template>
  <div class="wrap">
    <div v-if="online == 0">状态：<span class="red">离线</span></div>
    <div v-else-if="online == 1">状态：<span class="blue">在线</span></div>
    <div v-else-if="online == -1">状态：<span class="gray">已取消</span></div>
    <p>名称：{{ alias }}</p>
    <p>经度：{{ longitude }}</p>
    <p>维度：{{ latitude }}</p>
    <Video ref="myvideo" :url="url" />
  </div>
</template>

<script>
import { getData, postData } from "@/request/http";
import Video from "./EasyplayerMap.vue";

export default {
  name: "wrap",
  data() {
    return {
      alias: "",
      longitude: "",
      latitude: "",
      online: 0,
      sn: "",
      url: "",
      show_video: false,
    };
  },
  components: { Video },
  computed: {},
  mounted() {
    this.getUrl(this.sn);
  },
  methods: {
    //点击摄像机sn，获取url
    getUrl(sn) {
      if (!sn) {
        return;
      }
      return new Promise((resolve, reject) => {
        postData("/adminweb/device/stream/live/url/ticket/lasted/unlimited", {
          sn: sn,
          ptl: "WS-FLV",
          channel: 0,
          sub: 0,
        })
          .then((res) => {
            resolve(res);
            this.url = res.datas.stream;
            this.show_video = true;
            console.log(this.url);
          })
          .catch((res) => {
            reject("error");
            this.$message.error(res.code + "，" + res.msg);
          });
      });
    },
  },
};
</script>

<style scoped>
.gray {
  color: #707271;;
}
.blue {
  color: blue;
}
.red {
  color: red;
}
.esri-ui .esri-popup{
    border-radius: 8px !important;
}
</style>
